import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import LoginStatusView from './LoginStatusView'
import { Link, NavLink } from 'react-router-dom'
import SearchView from '../../SearchView'
import { MoreOutlined } from '@ant-design/icons'
import SubPhotoModal from '../../ModalView/SubPhotoModal'

interface IHomeNavBar {
    searchValue?: string
}

export default function HomeNavBar(props: IHomeNavBar) {
    const [expend, setExpends] = useState(false)
    const [searchWidth, setSearchWidth] = useState<any>()
    const [isShow, setIsShow] = useState(false)

    useEffect(() => {
        setSearchWidth(
            ((20 +
                $(`.${style.line__view}`).outerWidth(true)! +
                $(`.${style.home__btn}`).outerWidth(true)! +
                $(`.${style.more__icon}`).outerWidth(true)! +
                $(`.${style.submit__btn}`).outerWidth(true)! +
                $(`.${style.login__status__view}`).outerWidth(true)!) /
                $(`.${style.container}`).width()!) *
                100 +
                'vw'
        )
    }, [])

    return (
        <div className={style.container}>
            <Link to="/editorial" className={style.line__view}>
                <span>LineView</span>
            </Link>

            <SearchView
                width={searchWidth}
                height={'0.95rem'}
                searchWidth={'18px'}
                clearWidth={'14px'}
                borderRadius={'30px'}
                placeHolder="搜索免费高分辨率照片在LineView"
                searchValue={props.searchValue}
            />

            <NavLink to="/editorial" className={style.home__btn} activeClassName={style.active}>
                Home
            </NavLink>

            <div className={style.more__icon}>
                <MoreOutlined
                    rotate={90}
                    className={style.icon}
                    onClick={e => {
                        setExpends(!expend)
                    }}
                />

                <div className={`${style.pop__content} ${expend ? 'active' : ''}`}>
                    <div className={style.triangle} />
                    {/*<Link to={'#'}>收藏夹</Link>*/}
                    <Link to={'/topic/all'}>主题</Link>
                    <Link to={'/license'}>许可</Link>
                    <Link to={'/policy'}>隐私政策</Link>
                    <Link to={'/terms'}>条款</Link>
                </div>
            </div>

            <div
                className={style.submit__btn}
                onClick={() => {
                    localStorage.getItem('account') ? setIsShow(true) : (window.location.pathname = '/account/login')
                }}>
                <span>上传图片</span>

                {isShow ? (
                    <div
                        onClick={e => {
                            e.stopPropagation()
                            setIsShow(false)
                        }}>
                        <SubPhotoModal />
                    </div>
                ) : (
                    ''
                )}
            </div>

            <div className={style.login__status__view}>
                <LoginStatusView />
            </div>
        </div>
    )
}
